<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'user.jsp' starting page</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/style/layui/css/layui.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
<style type="text/css">
label {
	font-family: "Times New Roman", Times, serif;
	font-size: 15px;
	color: #000000;
}

th {
	text-align: center;
}
</style>
</head>

<body>
	<div
		style="width:100%;background-color:#F8F8FF;height:100%;position: absolute;top:1px;left:1px">
		<div id="searchdiv"
			style="border:1px solid #96c2f1;background:#eff7ff;height:12%;width:100%;position: absolute;top:5px;left:5px">
			<div class="row" style="position: relative;top:15px">
				<form id="searchform">
					<div class="col-xs-1" style="text-align:right;line-height:25px">
						<label for="userid">用户ID</label>
					</div>
					<div class="col-xs-2"
						style="text-align:left;padding:0px; margin:0px;">
						<input name="userid" id="userid" type="text" class="form-control">
					</div>
					<div class="col-xs-1" style="text-align:right;line-height:25px">
						<label for="username">用户名</label>
					</div>
					<div class="col-xs-2"
						style="text-align:left;padding:0px; margin:0px;">
						<input name="username" id="username" type="text"
							class="form-control"">
					</div>
					<div class="col-xs-1" style="text-align:right;line-height:25px">
						<label>用户状态</label>
					</div>
					<div class="col-xs-2"
						style="text-align:left;padding:0px; margin:0px;">
						<select class="form-control" name="userstate" id="state">
							<option value="-1">所有</option>
							<option value="1">正常</option>
							<option value="0">已关闭</option>
						</select>
					</div>
					<div class="col-xs-3" style="text-align:center;">
						<button type="button" class="btn btn-primary" id="search">
							<i class="am-icon-search"></i> 查询
						</button>
					</div>
				</form>
			</div>
		</div>
		<div id="operatediv"
			style="height:7%;width:100%;position: absolute;top:90px;left:15px">
			<button id="adduser" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-plus"></i>添加
			</button>
			<button id="edit" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-pencil"></i>修改
			</button>

			<button id="delete" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-remove"></i>删除
			</button>

			<button id="role" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-pencil"></i>用户分配权限
			</button>
			<button id="adduserfile" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="glyphicon glyphicon-plus"></i>用户导入
			</button>
			<button id="export" class="am-btn am-btn-primary am-btn-xs"
				type="button">
				<i class="am-icon-download"></i>用户导出
			</button>
		</div>
		<div id="tablediv"
			style="height:70%;width:100%;position: absolute;top:140px;left:15px">
			<table class="layui-table" id="usertable" border="1px">
				<colgroup>
					<col width="10">
					<col width="150">
					<col width="200">
					<col>
				</colgroup>

				<tr id="head" style="background-color:#d2d2d2">
					<th><input id="allid" name="mycheckbox" type="checkbox"></th>
					<th>用户ID</th>
					<th>用户名</th>
					<th>状态</th>
					<th>上次登陆</th>
				</tr>


				<c:forEach items="${userlist }" var="user">
					<tr>
						<td><input type="checkbox" id="box" value="${user.userId }"
							name="mycheckbox"></td>
						<td>${user.userId }</td>
						<td>${user.userName }</td>
						<td><c:forEach var="list" items="${codelist}">
								<c:if test="${list.codeValue ==user.userState}">
							${list.codeName }
						</c:if>
							</c:forEach></td>
						<td>${user.lastVisit }</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<div id="page" style="text-align:center"></div>
		</div>


	</div>
	<form action=""></form>
</body>


<script type="text/javascript">
	$(document).ready(function() {
		$("#allid").attr("checked", false);
	});
	layui.use([ 'layer', 'table', 'laypage' ], function() {
		var layer = layui.layer //获得layer模块
		, table = layui.table, page = layui.laypage; //获得laypage模块

		//使用模块
		$("#adduser").click(function() {
			layer.open({
				type : 2,
				title : '用户添加',
				content : [ 'adduser', 'no' ],
				area : [ '500px', '300px' ],
				end : function() {
					location.reload();
				}

			});
		});

		$("#adduserfile").click(function() {
			layer.open({
				type : 2,
				title : '用户导入',
				content : [ 'adduserfile', 'no' ],
				area : [ '400px', '300px' ],
				end : function() {
					location.reload();
				}
			})
		});

		$("#export").click(function() {

			var myurl = "${pageContext.request.contextPath}/user/export";
			var form = $("<form>");
			form.attr("style", "display:none");
			form.attr("method", "post");
			form.attr("action", myurl);
			$("body").append(form);
			form.submit();
		});

		//分页参数设置 这些全局变量关系到分页的功能

		var current = ${current};//当前页数

		page.render({
			elem : 'page' //注意，这里的 test1 是 ID，不用加 # 号
			,
			count : ${pagesize}//数据总数，从服务端得到
			,
			limit : 8,
			curr : current,
			jump : function(obj, first) {
				if (!first) {
					var current = obj.curr;
					location.href = '?curr=' + obj.curr;
				}
			}

		});

	});

	var pagesize = 0;
	var current = 1;
	function getusers(data) {
		var s = "";
		$
				.each(
						data,
						function(v, o) {
							s += '<tr><td><input type="checkbox" value='+o.userId +' id="box" name="mycheckbox"></td><td>'
									+ o.userId + '</td>';
							s += '<td>' + o.userName + '</td>';
							if (o.userState == 1) {
								s += '<td>正常</td>';
							} else {
								s += '<td>已关闭</td>';
							}
							s += '<td>' + o.lastVisit + '</td></tr>';

						});
		if (data.length > 0) {
			$("#usertable tbody tr:not(:first)").html("");
			$("#usertable #head").after(s);
		} else {
			$("#usertable tbody tr:not(:first)").html("");
			$("#usertable #head").after("<tr>无数据</tr>");
		}
	}

	function getuserpage() {
		$.ajax({
			type : "POST", //http请求方式    
			url : "${pageContext.request.contextPath}/user/searchuser?id="
					+ new Date().getTime() + "&curr=" + current,//发送给服务器的url    
			data : $("#searchform").serialize(), //发送给服务器的参数  
			async : false,
			success : function(data) {
				getusers(data.userlist);
				pagesize = data.total;

				$("#userid").val(data.userid);
				$("#username").val(data.username);
				$("#state").val(data.userstate);
			},
			error : function() {
				alert("error!");
			},
		});
	}
	var isCheckAll = false;
	$("#search").click(function() {
		isCheckAll = false;
		$("#allid").attr("checked", false);
		getuserpage();

		current = 1;//当前页数
		layui.use([ 'layer', 'table', 'laypage' ], function() {
			var layer = layui.layer //获得layer模块
			, table = layui.table, page = layui.laypage; //获得laypage模块
			page.render({
				elem : 'page' //注意，这里的 test1 是 ID，不用加 # 号
				,
				count : pagesize//数据总数，从服务端得到
				,
				limit : 8,
				curr : current,
				jump : function(obj, first) {
					if (!first) {
						current = obj.curr;
						getuserpage();
						//	location.href = "${pageContext.request.contextPath}/user/searchuser?curr="+obj.curr+"&userid="+$("#userid").val()+"&username="+$("#username").val()+"&userstate="+$("#state").val();
					}
				}

			});
			getuserpage();
		});

	});

	$("#allid").click(function() {
		if (!isCheckAll) {
			$('input[type=checkbox]').each(function() {
				$("input[type='checkbox']").prop("checked", true);

			});
			isCheckAll = true;
		} else {
			$('input[type=checkbox]').each(function() {
				$("input[type='checkbox']").prop("checked", false);
				isCheckAll = false;
			});
		}
	});

	$("input[type='checkbox']").click(function() {
		if ($(this).is(':checked')) {
		} else {
			isCheckAll = false;
			$("#allid").prop("checked", false);

		}
	});

	$("#edit").click(function() {
		var len = 0;
		var id = 0;
		$.each($('input:checkbox:checked'), function() {
			// alert($('input[type=checkbox]:checked').length+","+$(this).val());
			len = $('input[type=checkbox]:checked').length;
			id = $(this).val();
		});
		if (len > 1 || len < 1) {
			layer.open({
				title : '编辑用户',
				content : '请选择一个用户'
			});
		} else {
			layer.open({
				type : 2,
				title : '用户编辑',
				content : [ 'edituser?id=' + id, 'no' ],
				area : [ '500px', '300px' ],
				end : function() {
					location.reload();
				}

			});
		}
	});
	$("#delete")
			.click(
					function() {
						var idvalue = new Array();
						$.each($('input:checkbox:checked'), function() {
							// alert($('input[type=checkbox]:checked').length+","+$(this).val());
							idvalue.push($(this).val());
						});
						if (idvalue.length == 0) {
							layer.open({
								title : '删除用户',
								content : '未选择用户！',
							});
						} else {
							layer
									.open({
										title : '删除用户',
										content : '确认删除用户？',
										btn : [ '确认', '取消' ],
										yes : function(index, layero) {
											$
													.ajax({
														type : "post",
														url : "${pageContext.request.contextPath}/user/deleteuser",
														data : {
															ids : idvalue
														},
														dataType : "text",
														traditional : true,//这里设为true就可以了
														success : function(res) {
															if (res == "success") {
																layer
																		.alert(
																				'用户删除成功',
																				{
																					skin : 'layui-layer-molv' //样式类名
																					,
																					closeBtn : 0,
																					end : function() {
																						location
																								.reload();
																					}
																				},
																				function() {
																					layer
																							.closeAll();
																				});
															} else {
																layer
																		.alert(
																				'用户删除失败',
																				{
																					skin : 'layui-layer-molv' //样式类名
																					,
																					closeBtn : 0
																				},
																				function() {
																					layer
																							.closeAll();
																				});
															}
														},

													});
										}
									});
						}
					});

	$("#role").click(function() {
		var len = 0;
		var id = 0;
		$.each($('input:checkbox:checked'), function() {
			// alert($('input[type=checkbox]:checked').length+","+$(this).val());
			len = $('input[type=checkbox]:checked').length;
			id = $(this).val();
		});
		if (len > 1 || len < 1) {
			layer.open({
				title : '编辑用户',
				content : '请选择一个用户'
			});
		} else {
			layer.open({
				type : 2,
				title : '用户设置权限',
				content : [ 'edituserrole?id=' + id, 'no' ],
				area : [ '700px', '500px' ],
				end : function() {
					location.reload();
				}

			});
		}
	});
</script>

</html>